<template>
  <div class="all_into_page page_scroll">

    <!-- 搜索区域 开始 -->
    <div class="search_box">
      <Params ref="params" @search="onSearch" />
    </div>
    <!-- 搜索区域 end -->

    <!-- 列表区域 开始 -->
    <div class="">
      <el-table ref="elTable" class="el_table" :data="dataList" border>
        <el-table-column label="序号" type="index" width="54"></el-table-column>
        <el-table-column label="客户信息" width="140">
          <template slot-scope="{row}">
            <tab-user :user="row" :list="dataList" v-if="row"></tab-user>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="sex" :width="sortTdWidth">
          <template slot-scope="{row}">{{SEXTYPELIST[row.customer?row.customer.sex:'']}}</template>
        </el-table-column>
        <el-table-column label="进度" prop="process" :width="sortTdWidth">
          <template slot-scope="{row}">{{SHOWBEHINDSTATUSLIST[row.process]}}</template>
        </el-table-column>
        <el-table-column label="备注资料" prop="info"></el-table-column>
        <el-table-column label="跟进记录" prop="" :width="longTdWidth">
          <template slot-scope="{row}">
            <el-popover placement="left-end" trigger="hover" width="500">
              <div class="remarkBox">
                <div class="remarkList">
                  <div class="item mb-3" v-for="(item,index) in row.remarkList" :key="index">
                    <div class="remark">{{item.remark}}</div>
                    <div class="createBy pl-3">{{item.createBy}}</div>
                    <div class="updateDate ml-3">{{item.updateDate}}</div>
                  </div>
                </div>
              </div>
              <div class="remarkList" slot="reference">
                <div class="item" :class="{hide:index>2}" v-for="(item,index) in row.remarkList" :key="index">
                  <div class="remark">{{cutWordLength(item.remark,'17') }}</div>
                  <div class="createBy pl-3">{{item.createBy}}</div>
                  <div class="updateDate ml-3">{{item.updateDate}}</div>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="未跟进时间" prop="noProcessDay"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" :id="row.id" @click="followUpHandle(row)">查看跟进资料</el-button>
          </template>
        </el-table-column>
      </el-table>
      <BasePagination v-model="page" :total="totalCount" @change="pageOnChange" />
    </div>
    <!-- 列表区域 end -->

  </div>
</template>
<script>
import { deepClone, broadcast, received } from "@/utils/util";
import {
  BEHINDSTATUSLIST,
  SHOWBEHINDSTATUSLIST,
  SEXTYPELIST,
} from "@/common/constants";
import GlsxDialog from "@/components/Dialog";
import { GET_THIRDPARTY_CUSTOMER_LIST } from "@/http/customer";
import Params from "@/views/clients-manage/all-clients/Params.vue";
import TabUser from "@/components/user";
export default {
  components: {
    GlsxDialog,
    Params,
    TabUser,
  },
  data() {
    return {
      searchForm: {},
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      BEHINDSTATUSLIST,
      SHOWBEHINDSTATUSLIST,
      sortTdWidth: 56,
      smallWidth: 110,
      tdWidth: 160,
      longTdWidth: 500,
      showDialog: false,
      checkList: [],
      selectItem: {},
      dialogFormVisible: false,
      updateLoading: false,
      SEXTYPELIST,
    };
  },
  mounted() {
    received("update.success", this.getList);
    this.getList();
  },
  methods: {
    // 分页切换事件
    pageOnChange(page) {
      this.page = page;
      this.getList();
    },

    // 获取参数
    getParams() {
      const oParams = {};
      const o = deepClone(this.searchForm);
      const m = o.searchTime;
      if (m && m.length > 0) {
        o.startDate = m[0];
        o.endDate = m[1];
      }
      delete o.searchTime;
      oParams.size = this.pageSize;
      oParams.paramObject = o;
      return oParams;
    },

    // 获取列表
    getList(current) {
      const oParams = this.getParams();
      oParams.page = current || this.page;
      GET_THIRDPARTY_CUSTOMER_LIST(oParams).then((res) => {
        const obj = res.data || {};
        this.dataList = obj.dataList || [];
        this.totalCount = obj.totalCount;
      });
    },

    // 搜索
    onSearch(row) {
      this.searchForm = { ...row };
      this.getList();
    },

    // 跟进
    followUpHandle(row) {
      // this.selectItem = Object.assign(item, item.customer);
      // this.dialogFormVisible = true;
      broadcast("look.user.follow", { data: row, show: false });
    },
  },
};
</script>
<style lang="scss" scoped>
.all_into_page {
  padding: 20px;
  .show_tips {
    font-size: 14px;
    color: #666;
    line-height: 2;
    margin: 10px 0;
  }
}
</style>
